<template>
  <view class="container">
    <!-- 排序栏 -->
    <view class="sort-bar">
      <button class="sort-btn" v-for="(btn, index) in sortButtons" :key="index" @click="sortTasks(btn.type)">{{ btn.text }}</button>
    </view>

    <!-- 任务列表 -->
    <view class="task-list">
      <view class="task-card" v-for="task in tasks" :key="task.id">
        <view class="task-info">
          <view class="task-title">{{ task.title }}</view>
          <view class="task-meta">
            <text class="priority" :class="'priority-' + task.priority">{{ getPriorityText(task.priority) }}</text>
            <text class="status" :class="'status-' + task.status">{{ getStatusText(task.status) }}</text>
            <text>截止日期: {{ task.dueDate }}</text>
          </view>
        </view>
        <button class="delete-btn" @click="showDeleteConfirm(task)">&times;</button>
      </view>
    </view>

    <!-- 删除确认模态框 -->
    <uni-popup ref="deleteModal" type="dialog">
      <uni-popup-dialog
        title="确认删除"
        content="确定要删除这个任务吗？此操作不可撤销。"
        :show-cancel="true"
        @confirm="confirmDelete"
        @close="cancelDelete"
      />
    </uni-popup>

    <!-- 添加任务弹窗 -->
    <uni-popup ref="addTaskModal" type="popup" background-color="#fff">
      <view class="popup-content">
        <text class="popup-title">添加新任务</text>
        <form @submit="addTask">
          <view class="form-group">
            <text class="form-label">任务标题</text>
            <input class="form-input" v-model="newTask.title" placeholder="请输入任务标题" />
          </view>
          <view class="form-group">
            <text class="form-label">优先级</text>
            <picker class="form-picker" :range="priorityOptions" v-model="newTask.priority">
              <view class="picker-value">{{ getPriorityText(newTask.priority) }}</view>
            </picker>
          </view>
          <view class="form-group">
            <text class="form-label">状态</text>
            <picker class="form-picker" :range="statusOptions" v-model="newTask.status">
              <view class="picker-value">{{ getStatusText(newTask.status) }}</view>
            </picker>
          </view>
          <view class="form-group">
            <text class="form-label">截止日期</text>
            <picker class="form-picker" mode="date" v-model="newTask.dueDate">
              <view class="picker-value">{{ newTask.dueDate || '请选择日期' }}</view>
            </picker>
          </view>
          <view class="form-buttons">
            <button class="submit-btn" form-type="submit">添加</button>
            <button class="cancel-btn" @click="cancelAdd">取消</button>
          </view>
        </form>
      </view>
    </uni-popup>

    <!-- 控制中心按钮 -->
    <view class="control-center" @click="showAddTaskModal">+</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tasks: [],
      currentTaskToDelete: null,
      sortButtons: [
        { text: '按时间排序', type: 'time' },
        { text: '按优先级排序', type: 'priority' },
        { text: '按状态排序', type: 'status' }
      ],
      newTask: {
        title: '',
        priority: 'medium',
        status: 'todo',
        dueDate: ''
      },
      priorityOptions: ['high', 'medium', 'low'],
      statusOptions: ['todo', 'doing', 'done']
    }
  },
  onLoad() {
    this.loadTasks()
  },
  methods: {
    loadTasks() {
      const storedTasks = uni.getStorageSync('tasks')
      this.tasks = storedTasks ? JSON.parse(storedTasks) : []
    },
    saveTasks() {
      uni.setStorageSync('tasks', JSON.stringify(this.tasks))
    },
    showAddTaskModal() {
      this.$refs.addTaskModal.open()
    },
    addTask(e) {
      const task = {
        id: Date.now(),
        ...this.newTask,
        createdAt: new Date().toISOString()
      }
      this.tasks.push(task)
      this.saveTasks()
      this.$refs.addTaskModal.close()
      this.newTask = {
        title: '',
        priority: 'medium',
        status: 'todo',
        dueDate: ''
      }
    },
    showDeleteConfirm(task) {
      this.currentTaskToDelete = task
      this.$refs.deleteModal.open()
    },
    confirmDelete() {
      if (this.currentTaskToDelete) {
        const index = this.tasks.findIndex(t => t.id === this.currentTaskToDelete.id)
        if (index > -1) {
          this.tasks.splice(index, 1)
          this.saveTasks()
        }
      }
      this.cancelDelete()
    },
    cancelDelete() {
      this.$refs.deleteModal.close()
      this.currentTaskToDelete = null
    },
    cancelAdd() {
      this.$refs.addTaskModal.close()
      this.newTask = {
        title: '',
        priority: 'medium',
        status: 'todo',
        dueDate: ''
      }
    },
    sortTasks(type) {
      switch(type) {
        case 'time':
          this.tasks.sort((a, b) => new Date(a.dueDate) - new Date(b.dueDate))
          break
        case 'priority':
          const priorityOrder = { high: 3, medium: 2, low: 1 }
          this.tasks.sort((a, b) => priorityOrder[b.priority] - priorityOrder[a.priority])
          break
        case 'status':
          const statusOrder = { todo: 1, doing: 2, done: 3 }
          this.tasks.sort((a, b) => statusOrder[b.status] - statusOrder[a.status])
          break
      }
      this.saveTasks()
    },
    getPriorityText(priority) {
      const texts = {
        high: '高优先级',
        medium: '中优先级',
        low: '低优先级'
      }
      return texts[priority] || priority
    },
    getStatusText(status) {
      const texts = {
        todo: '未开始',
        doing: '进行中',
        done: '已完成'
      }
      return texts[status] || status
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f5f6fa;
  min-height: 100vh;
}

.sort-bar {
  padding: 30rpx 40rpx;
  background: #fff;
  border-radius: 32rpx;
  display: flex;
  gap: 30rpx;
}

.popup-content {
  padding: 40rpx;
  width: 600rpx;
}

.popup-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  display: block;
  text-align: center;
}

.form-group {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  margin-bottom: 10rpx;
  font-size: 28rpx;
  color: #666;
}

.form-input {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.form-picker {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
}

.picker-value {
  font-size: 28rpx;
}

.form-buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 40rpx;
}

.submit-btn, .cancel-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
}

.submit-btn {
  background-color: #007aff;
  color: #fff;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666;
}
  /* margin-bottom: 20rpx;
 */

.sort-btn {
  flex: 1;
  padding: 16rpx 30rpx;
  border: 2rpx solid #ddd;
  border-radius: 40rpx;
  background: white;
  color: #666;
  font-size: 28rpx;
}

.task-list {
  padding: 20rpx;
}

.task-card {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  position: relative;
  box-shadow: 0 8rpx 12rpx rgba(0, 0, 0, 0.1);
}

.task-info {
  flex: 1;
  padding-right: 60rpx;
}

.task-title {
  font-size: 32rpx;
  font-weight: 600;
  margin-bottom: 10rpx;
  color: #2d3436;
}

.task-meta {
  display: flex;
  gap: 20rpx;
  font-size: 24rpx;
  color: #666;
}

.priority,
.status {
  padding: 4rpx 16rpx;
  border-radius: 24rpx;
  font-size: 24rpx;
}

.priority-high {
  background: #ffebee;
  color: #e53935;
}

.priority-medium {
  background: #fff3e0;
  color: #fb8c00;
}

.priority-low {
  background: #e8f5e9;
  color: #43a047;
}

.status-todo {
  background: #e3f2fd;
  color: #1976d2;
}

.status-doing {
  background: #e0f7fa;
  color: #00acc1;
}

.status-done {
  background: #f1f8e9;
  color: #7cb342;
}

.delete-btn {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  width: 48rpx;
  height: 48rpx;
  line-height: 48rpx;
  text-align: center;
  border: none;
  background: none;
  color: #666;
  font-size: 36rpx;
  padding: 0;
}

.control-center {
  position: fixed;
  right: 60rpx;
  bottom: 60rpx;
  width: 120rpx;
  height: 120rpx;
  background: #4834d4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 48rpx;
  box-shadow: 0 8rpx 12rpx rgba(72, 52, 212, 0.4);
}

.modal-content {
  background: white;
  padding: 40rpx;
  border-radius: 32rpx;
}

.modal-title {
  font-size: 36rpx;
  color: #2d3436;
  margin-bottom: 40rpx;
  display: block;
  text-align: center;
}

.form-group {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  margin-bottom: 10rpx;
  color: #2d3436;
  font-size: 28rpx;
}

.form-input,
.form-picker {
  width: 100%;
  padding: 16rpx 24rpx;
  border: 2rpx solid #ddd;
  border-radius: 16rpx;
  font-size: 28rpx;
}

.picker-value {
  color: #2d3436;
}

.form-buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 40rpx;
}

.submit-btn,
.cancel-btn {
  flex: 1;
  padding: 20rpx;
  border-radius: 16rpx;
  font-size: 28rpx;
  text-align: center;
}

.submit-btn {
  background: #4834d4;
  color: white;
}

.cancel-btn {
  background: #f5f6fa;
  color: #2d3436;
}
</style>
